<template>
  <div class="mapView">
      <div id="main"></div>
  </div>
</template>

<script>
import genJson from '@/assets/data.json'
  export default {
   mounted(){
    const myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('guangdong',genJson)
    let option ={
      backgroundColor:'#f6cec1',
      series:[
        {
          type:'map',
          label:{
            normal:{
              show:true,
              textStyle:{
                color:'#f8ebe6'
              }
            },
            emphasis:{
              textStyle:{
                color:'#4d4030'
              }
            }
          },
          zoom:1.1,
          map:'guangdong',
          itemStyle:{
            normal:{  
              borderWidth:1,
              areaColor:{
                type:'radial',
                x:0.5,
                y:0.5,
                r:0.8,
                colorStops:[{
                  offset:0,
                  color:'#7c1823'
                },{
                  offset:1,
                  color:'#82202b'
                }
              ],
              globalCoord:true,
              
              },
            },
            emphasis:{
              areaColor:'#fff',
              borderWidth:0,
              
            }
          }
        }
      ]
    }
    myChart.setOption(option)
   }
  }
</script>

<style lang="scss" scoped>
  .mapView{
    width: 100%;
    #main{
      width: 100%;
      height: 800px;
    }
  }
</style>